<!--
 * @Author: Bennty
 * @Date: 2024-09-24 15:31:27
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-10 10:12:37
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Plus" @click="handleClickAddSingleCategory">新增</el-button>
                    </el-col>
                </el-row>
                <el-table :data="singleCategoryList">
                    <el-table-column label="材料小类名称" prop="subclassName" align="center"></el-table-column>
                    <el-table-column label="材料小类类型" prop="subclassType" align="center"></el-table-column>
                    <el-table-column label="材料小类排序" prop="sort" align="center"></el-table-column>
                    <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-tooltip content="编辑" placement="top">
                            <el-button link type="primary" :style="{fontSize:'16px'}" icon="Edit" @click="handleClickEdit(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="danger" :style="{fontSize:'16px'}"  icon="Delete" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="getSingleCategoryList" />
            </template>
        </el-card>
        <el-dialog v-model="addVisible" title="新增材料小类" width="25%" @close="handleCloseAddSingleCategory" destory-on-close>
            <el-form :model="addFormData" ref="addFormRef" label-width="auto">
                <el-form-item label="材料小类名称" prop="subclassName">
                    <el-input placeholder="请输入" v-model="addFormData.subclassName" />
                </el-form-item>
                <el-form-item label="材料小类类型" prop="subclassType">
                    <el-input placeholder="请输入" v-model="addFormData.subclassType" />
                </el-form-item>
                <el-form-item label="材料小类排序" prop="sort">
                    <el-input placeholder="请输入" v-model.number="addFormData.sort" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitAdd" >确 定</el-button>
                    <el-button @click="handleCloseAddSingleCategory">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="editVisible" title="编辑材料小类" width="25%" @close="handleCloseEdit" destory-on-close>
            <el-form :model="editFormData" ref="editFormRef">
                <el-form-item label="材料小类名称" prop="subclassName">
                    <el-input placeholder="请输入" v-model="editFormData.subclassName" />
                </el-form-item>
                <el-form-item label="材料小类类型" prop="subclassType">
                    <el-input placeholder="请输入" v-model="editFormData.subclassType" />
                </el-form-item>
                <el-form-item label="材料小类排序" prop="sort">
                    <el-input placeholder="请输入" v-model.number="editFormData.sort" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmitEdit" >确 定</el-button>
                    <el-button @click="handleCloseEdit">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { getSingleListApi, getSingleByTotalApi, addSingleApi, editSingleApi, getSingleCatagoryDetailApi, deleteSingleCatagoryApi } from '@/api/sj/warehouse/typeManagement';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const singleCategoryList = ref<any[]>([]);
const loading = ref(false);
const totalData = ref(0);
const addVisible = ref(false);
const addFormRef = ref<FormInstance>();
const editVisible = ref(false);
const editFormRef = ref<FormInstance>();
const router = useRouter();

const type = computed(()=>{
    return router.currentRoute.value.fullPath.split('/')[3]
});

const data = reactive({
    queryParams:{
        pageSize: 30,
        pageNum: 1,
        majorType: type.value
    },
    addFormData: {
        subclassType: undefined,
        subclassName: undefined,
        remark: undefined,
        sort: undefined
    },
    editFormData: {
        subclassType: undefined,
        subclassName: undefined,
        remark: undefined,
        sort: undefined
    }
});

const { queryParams, addFormData,editFormData } = toRefs(data);



/** 获取相关材料小类 */
const getSingleCategoryList = async () => {
    loading.value = true;
    const { rows,total } = await getSingleListApi(queryParams.value);
    totalData.value = total;
    singleCategoryList.value = rows;
    loading.value = false;
};

const handleClickAddSingleCategory = () => {
    addVisible.value = true;
};

const handleSubmitAdd = async () => {
    const submitData = {
        ...addFormData.value,
        majorType: type.value
    };
    const { code } = await addSingleApi(submitData);
    if(code == 200){
        handleCloseAddSingleCategory()
    };
};

const handleCloseAddSingleCategory = () => {
    addFormRef.value?.resetFields();
    addVisible.value = false;
};

const handleClickEdit = async (row: any) => {
    const { data,code } = await getSingleCatagoryDetailApi(row.id);
    if(code == 200){
        editFormData.value = data;
        editVisible.value = true;
    }
};

const handleCloseEdit = () => {
    editFormRef.value?.resetFields();
    editVisible.value = false;
};

const handleSubmitEdit = async () => {
    const submitData = { 
        ...editFormData.value,
        majorType: type.value
    };
    const { code } = await editSingleApi(submitData);
    if(code == 200){
        handleCloseEdit();
        getSingleCategoryList();
    };
};

const handleClickDelete = async (row: any) => {
    await proxy?.$modal.confirm("确定删除该材料小类么？");
    const result = await deleteSingleCatagoryApi(row.id);
    if(result.code == 200){
        proxy?.$modal.msgSuccess("删除成功");
        getSingleCategoryList();
    };
};

onMounted(()=>{
    getSingleCategoryList()
})

</script>

<style scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>